<template>
	<!-- 主容器，根据isDark状态切换暗黑模式 -->
	<view class="container" :class="{ dark: isDark }">
		<!-- 状态栏 -->
		<view class="status-bar"></view>
		
		<!-- 功能列表区域 -->
		<view class="features slide-up">
			<!-- 实时监控功能项 -->
			<view class="feature-item" @click="openCamera">
				<view class="feature-icon">📹</view>
				<view class="feature-info">
					<text class="feature-name">实时监控</text>
					<text class="feature-desc">监控小车运动</text>
				</view>
				<text class="feature-arrow">></text>
			</view>
			
			<!-- 语音控制功能项 -->
			<view class="feature-item" @click="voiceControl">
				<view class="feature-icon">🎤</view>
				<view class="feature-info">
					<text class="feature-name">语音控制</text>
					<text class="feature-desc">语音控制小车</text>
				</view>
				<text class="feature-arrow">></text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			batteryLevel: 85, // 电池电量
			loadingText: '加载中...', // 加载提示文本
			isLoading: false, // 是否正在加载
			updateTimer: null, // 数据更新定时器
			isDark: false // 是否暗黑模式
		}
	},
	
	// 页面显示生命周期钩子
	onShow() {
		// 从全局获取暗黑模式设置
		const dark = getApp().globalData.darkMode;
		this.isDark = dark;
	
		// 根据暗黑模式设置界面样式
		if (dark) {
			// 暗黑模式下的tabBar样式
			uni.setTabBarStyle({
				backgroundColor: '#1e1e1e',
				borderStyle: 'black',
				color: '#999999',
				selectedColor: '#ffffff'
			});
			// 暗黑模式下的导航栏样式
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#1e1e1e'
			});
		} else {
			// 亮色模式下的tabBar样式
			uni.setTabBarStyle({
				backgroundColor: '#ffffff',
				borderStyle: 'black',
				color: '#7A7E83',
				selectedColor: '#fb7e29'
			});
			// 亮色模式下的导航栏样式
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#F8F8F8'
			});
		}
	},
	
	// 页面加载生命周期钩子
	onLoad() {
		this.startDataUpdate(); // 开始数据更新
	},
	
	// 页面卸载生命周期钩子
	onUnload() {
		// 清除定时器
		if (this.updateTimer) {
			clearInterval(this.updateTimer);
		}
	},
	
	methods: {
		/**
		 * 打开实时监控
		 */
		openCamera() {
			this.showLoading('正在连接摄像头...');
			setTimeout(() => {
				this.hideLoading();
				// 跳转到摄像头页面
				uni.navigateTo({
					url: '/pages/camera/camera'
				});
			}, 1500);
		},

		/**
		 * 语音控制
		 */
		voiceControl() {
			this.showToast('语音控制已激活', 'none');
		},
		
		/**
		 * 显示提示信息
		 * @param {string} title - 提示标题
		 * @param {string} icon - 提示图标
		 */
		showToast(title, icon) {
			icon = icon || 'none';
			uni.showToast({
				title: title,
				icon: icon,
				duration: 2000
			});
		},

		/**
		 * 显示加载状态
		 * @param {string} text - 加载提示文本
		 */
		showLoading(text) {
			text = text || '加载中...';
			this.loadingText = text;
			this.isLoading = true;
		},

		/**
		 * 隐藏加载状态
		 */
		hideLoading() {
			this.isLoading = false;
		},

		/**
		 * 开始数据更新
		 */
		startDataUpdate() {
			// 模拟电池电量更新
			this.updateTimer = setInterval(() => {
				this.batteryLevel = Math.floor(Math.random() * 10) + 80;
			}, 30000); // 30秒更新一次
		}
	}
}
</script>
<style>
	/* 主容器样式 */
	.container {
		background: linear-gradient(135deg, #f7f7f7 0%, #e8e8e8 100%);
		min-height: 100vh;
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom)); /* 考虑安全区域 */
		color: #333;
		box-sizing: border-box;
	}

	/* 状态栏样式 */
	.status-bar {
		height: 44px;
		background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
		position: relative;
		overflow: hidden;
	}
	
	/* 功能列表区域 */
	.features {
		margin: 32rpx;
	}
	
	/* 功能项样式 */
	.feature-item {
		display: flex;
		align-items: center;
		padding: 40rpx;
		background: white;
		border-radius: 40rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.04);
		position: relative;
		transition: all 0.3s ease;
	}
	
	/* 功能项点击效果 */
	.feature-item::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 100%;
		background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
		transition: width 0.3s ease;
	}
	
	.feature-item:active::before {
		width: 8rpx;
	}
	
	.feature-item:active {
		background: rgba(255, 107, 53, 0.02);
		transform: translateX(8rpx);
	}
	
	/* 功能图标样式 */
	.feature-icon {
		width: 96rpx;
		height: 96rpx;
		background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 32rpx;
		font-size: 40rpx;
		transition: all 0.3s ease;
	}
	
	/* 功能信息区域 */
	.feature-info {
		flex: 1;
	}
	
	/* 功能名称样式 */
	.feature-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}
	
	/* 功能描述样式 */
	.feature-desc {
		font-size: 24rpx;
		color: #666;
		display: block;
	}
	
	/* 功能箭头样式 */
	.feature-arrow {
		color: #ccc;
		font-size: 28rpx;
		transition: all 0.3s ease;
	}
	
	.feature-item:active .feature-arrow {
		color: #ff6b35;
		transform: translateX(8rpx);
	}
	
	/* 暗黑模式样式 */
	.container.dark {
		background: #121212;
		color: #ddd;
	}
	
	.container.dark .status-bar {
		background: linear-gradient(135deg, #444 0%, #222 100%);
	}
	
	.container.dark .feature-item {
		background: #1e1e1e;
		box-shadow: none;
		color: #eee;
	}
	
	.container.dark .feature-icon {
		background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
		color: #fff;
	}
	
	.container.dark .feature-name {
		color: #fff;
	}
	
	.container.dark .feature-desc {
		color: #bbb;
	}
	
	.container.dark .feature-arrow {
		color: #999;
	}
	
	.container.dark .feature-item:active {
		background: rgba(255, 107, 53, 0.1);
	}
</style>